<template>
	<view class="page">
		<image class="bg-img" :src="$util.img('upload/uniapp/dowload.png')" mode="widthFix"></image>
		<view class="btn">
			<view class="btn-download" @click="down()" v-if="!$util.isWeiXin()">
				<!-- <image class="download-icon" src="./dowload.png" mode="aspectFit"></image> -->
				<text>立即下载</text>
			</view>
		</view>
		<!-- v-if="$util.isWeiXin()" -->
		<view class="mask" v-if="$util.isWeiXin()"><image class="image" :src="$util.img('upload/uniapp/open-browser-tips-new.png')" mode="aspectFit"></image></view>
		<view class="bg-bg" v-if="$util.isWeiXin()" @click="warning()">
			<image class="image" :src="$util.img('upload/uniapp/open-browser-tips-new.png')" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
	import config from 'common/js/config.js';
	export default {
		data() {
			return {
				phoneType: 'Android',
				isIos: false,
				version: '',
				new_version: '',
				down_url: "",
			}
		},
		onLoad() {
			// 检测是否已经下载APP
			// this.test_app()
			this.dowmInit();
			if (this.dowmInit()) {
				this.phoneType = 'IOS';
			}
			this.getVerson();
			this.version = config.version;
		},
		methods: {
			warning() {
				this.$util.showToast({
					title: '点击右上角，从浏览器中打开'
				})
			},
			dowmInit() {
				this.isIos = this.$util.phoneType();
			},
			test_app() {
				if (plus.runtime.isApplicationExist({
						pname: 'com.qixin.huichenglegou'
						// ,action:'weixin://'
					})) {
					console.log("已安装");
				} else {
					console.log("未安装");
				}
			},
			down() {
				
				if(this.isIos == true) {
					window.location.href = 'https://apps.apple.com/cn/app/id1542761319';
				}else{
					if (this.down_url) {
						window.location.href = this.down_url;
					} else {
						this.$util.showToast({
							title: '下载链接有误'
						})
					}
				}
				
			},
			//获取最新版本信息
			getVerson() {
				this.$api.sendRequest({
					url: "/appversion/api/version/latestInfo",
					data: {
						system_type: this.phoneType
					},
					success: res => {
						if (res.code == 0) {
							this.new_version = res.data.version_code;
							if (this.new_version != this.version && this.version != '') {
								this.tip = '立即更新';
							}
							this.down_url = res.data.real_download_url
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100vw;
		position: relative;

		.bg-img,.download-icon {
			position: absolute;
			top: 0;
			left: 0;
			height: 100vh;
			width: 100vw;
		}

		.btn {
			position: absolute;
			z-index: 9999;
			top: 85vh;
			height: 80rpx;
			width: 100vw;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn-download {
				width: 280rpx;
				height: 80rpx;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #FFE14E;

				text {
					color: #b30000;
					font-size: 40rpx;
				}
			}
		}
		.mask {
			left:0;
			top:0;
			width: 100vw;
			height: 100vh;
			//background-color: rgba($color: #000000, $alpha: 0.5);
			z-index: 10000 !important;
			
			.image {
				margin-left: 50%;
				margin-top: -5vh;
				width: 50%;
				//background-color: rgba($color: #000000, $alpha: 0.5);
			}
		}
		.bg-bg {
			top:0;
			left:0;
			position: absolute;
			width: 100vw;
			height: 100vh;
			background-color: rgba($color: #000000, $alpha: 0.5);
			z-index: 99999 !important;
			.image {
				margin-left: 50%;
				margin-top: -5vh;
				width: 50%;
				//background-color: rgba($color: #000000, $alpha: 0.5);
			}
		}
	}
</style>
